<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<style>
    #title {
        width: 400px;
        height: 20px;
    }

</style>

<body>
<div style="margin: 0 auto; width: 700px;height: 500px;text-align: center;background-color:lightgray">
    <h2>搜一搜</h2>
    <strong>输入搜索的关键字</strong>
    <input type="text" id="title" name="title" value="" autocomplete="off">
    <input type="button" value="搜一搜">
    <div style="width: 405px;margin-left: 180px;border: 1px solid;text-align:left;display: none" id="showKeyWord"></div>
</div>

</body>

<script>
    $(function () {
        $("#title").keyup(function () {
             var $keyword=$("#title").val();
            if ($keyword != ""){
                $.ajax({
                    url:"BordServlet",
                    type:"POST",
                    data:{
                        keyword:$keyword
                    },
                    dataType:"json",
                    success:function (rel) {
                       var $big=$("#showKeyWord");
                        $big.html("");
                        var small="";
                        if (rel.length>0){
                            $.each(rel,function (i,n) {
                                small+="<div class='ii'>";
                                small+=n;
                                small+="</div>";
                            })
                            $big.html(small).css("display","block");
                        }else {
                            $big.css("display","none");
                        }
                    }
                })
            }else {
                $("#showKeyWord").css("display","none");
            }
        });
        $(".ii").live("mouseover",function () {
            $(this).css("backgroundColor","#E6F341");
            $(this).css("cursor","pointer")
        });
        $(".ii").live("mouseout",function () {
            $(this).css("backgroundColor","");
        });
        $(".ii").live("click",function () {
            $("#title").val($(this).html())
            $("#showKeyWord").css("display","none");
        });
    });

</script>

</html>